<template>
  <el-dialog
      :title="data.title"
      v-model="data.visible"
      width="40%"
      destroy-on-close
  >
    <el-form :model="data.user" label-position="left" :rules="data.rules" ref="dataUser" size="small" inline>
      <el-row>
        <el-form-item prop="username" label="用户名" label-width="80px">
          <el-input type="text" placeholder="请输入" :disabled="data.disable" v-model="data.user.username"/>
        </el-form-item>
        <el-form-item prop="mobile" label="手机号" label-width="70px">
          <el-input type="tel" placeholder="请输入" :disabled="data.disable" v-model="data.user.mobile"/>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item prop="domainAccount" label="域账号" label-width="80px">
          <el-input type="text" placeholder="请输入" :disabled="data.domainDisable" v-model="data.user.domainAccount"/>
        </el-form-item>
        <el-form-item prop="email" label="邮箱" label-width="70px">
          <el-input type="email" placeholder="请输入" :disabled="data.disable" v-model="data.user.email"/>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item prop="dept" label="所在部门" label-width="80px">
          <el-input type="text" placeholder="请输入" v-model="data.user.dept"/>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item prop="status" label="所属状态" label-width="80px">
          <el-select v-model="data.user.status" placeholder="请选择">
            <el-option
                v-for="item in data.userStatus"
                :key="item.id"
                :label="item.statusName"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item prop="expirationDate" label="生效日期" label-width="80px">
          <el-date-picker
              v-model="data.user.exDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              unlink-panels
              format="YYYY年MM月DD日"
              value-format="YYYY-MM-DD"
          >
          </el-date-picker>
        </el-form-item>
      </el-row>
    </el-form>

    <template #footer>
    <span class="dialog-footer">
      <el-button @click="resetDialog('dataUser')">取 消</el-button>
      <el-button type="primary" @click="submitCli('dataUser')">确 定</el-button>
    </span>
    </template>
  </el-dialog>
</template>

<script>
import {computed, getCurrentInstance, reactive, ref} from "vue";
import {ElMessage} from "element-plus";

export default {
  name: "UserDialog",
  props:{
    user:{
      id: Number,
      username: String,
      mobile: String,
      status: String,
      email: String,
      domainAccount: String,
      password: String,
      exDate: Array,
      expirationDate: String,
      expirationEnd: String,
      dept: String
    }
  },
  //vue3新特性，，这样写要不然props获取不到
  setup(props) {
    const {proxy} = getCurrentInstance()
    const data = reactive({
      visible: false,
      userStatus: reactive([]),
      user: reactive({
        id: ref(0),
        username: ref(''),
        mobile: ref(''),
        status: ref(''),
        email: ref(''),
        domainAccount: ref(''),
        password: ref('Qazwsx12345'),
        exDate: ref(''),
        expirationDate: computed(() => proxy.data.user.exDate[0]),
        expirationEnd: computed(() => proxy.data.user.exDate[1]),
        dept: ref('')
      }),
      title: ref("新增用户"),
      disable: ref(false),
      domainDisable: ref(false),//reactive(() => proxy.data.disable && (proxy.data.user.domainAccount || proxy.data.user.domainAccount === '')),
      rules: {
        mobile: [
          {required: true, pattern: '^[1]\\d{10}$', message: '请输入正确的手机号', trigger: 'blur'}
        ],
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {
            pattern: '^[\u4e00-\u9fa5a-zA-Z0-9\\._-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$',
            message: "请输入正确的邮箱",
            trigger: "blur"
          }
        ],
        status: [
          {required: true, message: "请选择用户状态", trigger: 'blur'}
        ]
      }
    })

    const setUserData = (params)=>{
      console.log('------',params)
      if (params == null){
        proxy.data.user=JSON.parse('{}')
        proxy.data.user.password=ref('Qazwsx12345')
        proxy.data.title='新增用户'
        proxy.data.disable=false
        proxy.data.domainDisable=false
      }else{
        proxy.data.user=JSON.parse(JSON.stringify(params))
        proxy.data.title='更新用户'
        proxy.data.disable=true
        proxy.data.domainDisable = (params.domainAccount != null && params.domainAccount !== '')
        proxy.data.user.exDate = reactive([
          params.expirationDate, params.expirationEnd
        ])
      }
      proxy.data.visible = true
    }

    const resetDialog = (params)=>{
      proxy.$refs[params].resetFields()
      proxy.data.visible=false
    }

    const submitCli = (formName) => {
      proxy.$refs[formName].validate((valid) => {
        if (!valid) {
          return;
        }
      })
      console.log(proxy.data.user.id)
      let tmp = proxy.data.user.id
      if (!tmp || typeof (tmp) == "undefined" || tmp === 0) {
        addUser()
      } else {
        updateUser()
      }
    }

    function updateUser() {
      proxy.$service.updateUser(proxy.data.user).then(result => {
        if (result.res.code === 0) {
          ElMessage.success({
            message: result.res.msg,
            type: 'success',
          })
          proxy.$parent.getUserList()
          proxy.resetDialog('dataUser')
        } else {
          ElMessage.error(result.res.msg)
        }
      })
    }

    function addUser() {
      proxy.$service.insertUser(proxy.data.user).then(result => {
        if (result.res.code === 0) {
          ElMessage.success({
            message: result.res.msg,
            type: 'success',
          })
          proxy.$parent.getUserList()
          proxy.resetDialog('dataUser')
        } else {
          ElMessage.error(result.res.msg)
        }
      })
    }


    return {data, resetDialog,  submitCli,setUserData}
  }
}
</script>

<style scoped>

</style>